<template>
    <el-container>
        <el-main>
            <div style="line-height: 30px; min-height: 30px;margin-bottom:20px;overflow: hidden;">
                <el-form ref="queryData" :model="queryData" inline size="mini" style="min-height: 30px;">
                    <el-form-item prop="name">
                        <el-input v-model="queryData.name" placeholder="申请商户名称" style="width: 120px;"  v-if="queryData.name!=''"/>
                        <el-input v-model="queryData.abbreviationName" placeholder="申请商户名称" style="width: 120px;"  v-else/>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input v-model="queryData.code" placeholder="申请商户号码" style="width: 120px;" />
                    </el-form-item>
                    <el-form-item prop="changeType">
                        <el-select v-model="queryData.changeType" placeholder="变更类型">
                            <el-option label="基本信息" value="0" />
                            <el-option label="结算信息" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="changeStatus">
                        <el-select v-model="queryData.changeStatus" placeholder="变更状态">
                            <el-option label="待审核" value="0" />
                            <el-option label="上游审核中" value="1" />
                            <el-option label="审核驳回" value="2" />
                            <el-option label="上游审核通过" value="3" />
                            <el-option label="上游审核驳回" value="4" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <datePicker :time="queryData.time" @change="getTime" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询
                        </el-button>
                        <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置
                        </el-button>
                        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSysUser">新增变更单</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table v-loading="loading" :data="pageTableData" border size="small" max-height="700"
                style="margin-top:20px">
                <el-table-column label="申请商户名称" prop="name" header-align="center" align="center"  />
                <el-table-column label="申请商户号码" prop="code" header-align="center" align="center"  />
                <el-table-column label="变更类型" prop="changeType" header-align="center" align="center" >
                    <template slot-scope="scope">
                        <p>
                            {{
                            {
                            0: "基本信息",
                            1: "结算信息",
                            }[scope.row.changeType]
                            }}
                        </p>
                    </template>
                </el-table-column>

                <el-table-column label="提交时间" prop="submitTime" header-align="center" align="center"  />

                <el-table-column label="变更描述" prop="changeDesc" header-align="center" align="center"  />
                <el-table-column label="处理时间" prop="handlerTime" header-align="center" align="center"  />

                <el-table-column label="变更状态" prop="changeStatus" header-align="center" align="center" >
                    <template slot-scope="scope">
                        <p>
                            {{
                            {
                            0: "待审核",
                            1: "上游审核中",
                            2: "审核驳回",
                            3: "上游审核通过",
                            4: "上游审核驳回",
                            }[scope.row.changeStatus]
                            }}
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  header-align="center" align="center" min-width="80">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="showCheck(scope.row)"
                            v-if="scope.row.changeStatus ===  0 ">审核</el-button>
                        <el-button type="text" size="mini" @click="showDetail(scope.row)" v-else>查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="text-align: right">
            <el-pagination :current-page="queryData.pageNum" :page-sizes="[10, 20, 30, 40]"
                :page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="queryData.totalCount" @size-change="pageSizeChange" @current-change="pageCurrentChange" />
        </el-footer>

        <!-- 新增变更单 -->
        <el-dialog v-loading="sysUser.loading" :title="sysUser.title" :visible.sync="sysUser.show" top="15vh"
            width="600px" :before-close="handleClose">
            <el-form ref="sysUserForm" :model="sysUser.form" :rules="rules" size="small" label-width="150px"
                style="width: 450px;">
                <el-form-item label="申请商户码" prop="code">
                    <el-input v-model="sysUser.form.code" placeholder="请输入申请商户码" disabled="disabled" />
                </el-form-item>
                <el-form-item label="申请商户名称" prop="name">
                    <!-- <el-input v-model="sysUser.form.name" placeholder="请输入申请商户名称" /> -->
                    <el-select v-model="sysUser.form.name" placeholder="请输入申请商户码" style="width:300px" @change=selChange>
                        <el-option :label=item.name :value=item.code v-for="(item,index) in sysUser.form"
                            :key="index" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="changeType" label="变更类型">
                    <el-select v-model="sysUser.form.changeType" placeholder="变更单类型" style="width:300px">
                        <el-option label="基本信息" value="0" />
                        <el-option label="结算信息" value="1" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="sysUser.show = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitSysUser">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
    import datePicker from "@/components/model/component/date-picker/startEndTime.vue";
    import { sysAjax } from "Ajax";
    export default {
        name: "MERCHANTSHOP",
        components: {
            datePicker
        },
        data() {
            return {
                loading: false,
                queryData: {
                    pageNum: 1,
                    pageSize: 10,
                    totalCount: 0,
                    changeStatus: "",
                },
                pageTableData: [],
                statusMap: { false: "禁用", true: "启用" },
                rules: {
                    username: [{ required: true, message: "用户名称不能为空" }],
                    roleIds: [{ required: true, message: "角色不能为空" }]
                },
                sysUser: {
                    title: "新增变更单",
                    show: false,
                    loading: false,
                    form: {}
                },
                roleList: []
            };
        },
        created() {
            this.queryPageList();
            sysAjax.getRoleSelectList().then(data => {
                this.roleList = data;
            });
        },
        methods: {
            getTime(val) {
                this.queryData.submitStartTime = val.startTime;
                this.queryData.submitEndTime = val.endTime;
            },
            reset(formName) {
                this.$refs[formName].resetFields();
                this.queryPageList();
            },
            queryPageList() {
                this.loading = true;
                // console.log(this.queryData, 'shuju')
                sysAjax.selectMerchantChangeInfos(this.queryData).then(response => {
                    // console.log(response, '11111678678')
                    this.pageTableData = response.list;
                    this.queryData.pageNum = response.currPage;
                    this.queryData.pageSize = response.pageSize;
                    this.queryData.totalCount = response.totalCount;
                    this.loading = false;
                });
            },
            // selectMerchantInfos
            selectPageList() {
                this.loading = true;
                sysAjax.selectMerchantInfos().then(response => {
                    this.sysUser.form = response.list;
                    this.loading = false;
                });
            },
            pageChange(pageNo, pageSize) {
                this.queryData.pageNum = pageNo;
                this.queryData.pageSize = pageSize;
                this.queryPageList();
            },
            pageSizeChange(val) {
                this.queryData.pageSize = val;
                this.queryPageList();
            },
            pageCurrentChange(val) {
                this.queryData.pageNum = val;
                this.queryPageList();
            },
            addSysUser() {
                this.sysUser.show = true;
                this.sysUser = {
                    title: "新增变更单",
                    show: true,
                    loading: false,
                    form: {
                        status: true
                    }
                };
                this.selectPageList();
            },
            showDetail(val) {
                if (val.changeType === 0) {
                    this.$router.push("/merchant/change/base?status=2&id=" + val.id);
                } else {
                    this.$router.push("/merchant/change/bill?status=2&id=" + val.id);
                }
            },
            showCheck(val) {//审核
                // this.$router.push("/order/scan/detail?code=" + val.code);
                if (val.changeType === 0) {
                    this.$router.push("/merchant/change/base?status=3&id=" + val.id);
                } else {
                    this.$router.push("/merchant/change/bill?status=3&id=" + val.id);
                }
            },
            selChange(val) {//options触发事件
                this.sysUser.form.code = val;
            },
            submitSysUser() {
                //   this.$refs.sysUserForm.validate(valid => {
                //       console.log(valid,'quding')
                //     if (valid) {
                // this.sysUser.loading = true

                // const params = {
                //   'username': this.sysUser.form.username,
                //   'roleIds': this.sysUser.form.roleIds
                // }
                // sysAjax.sysUserAdd(params).then(() => {
                //   this.msgSuccess('添加成功')
                //   // 设置延迟执行
                //   this.timer = setTimeout(() => {
                //     this.sysUser = {
                //       title: '新增变更单',
                //       show: false,
                //       loading: false,
                //       form: {}
                //     }
                if (this.sysUser.form.changeType === '0') {
                    this.$router.push("/merchant/change/base?status=1&code=" + this.sysUser.form.code);
                } else {
                    this.$router.push("/merchant/change/bill?status=1&code=" + this.sysUser.form.code);
                }

                //  this.queryPageList()
                // }, 500)
                // }).catch(() => {
                //   this.sysUser.loading = false
                // })
                //     }
                //   });
            }
        }
    };
</script>

<style scoped lang='scss'>
    /deep/ .el-form-item__label {
        font-size: 13px;
        font-weight: 500;
    }
</style>